<template>
  <div id="box">
    <main>
      <RouterView />
    </main>
    <footer>
      <TabBar :links="tabLinks" />
    </footer>
  </div>
</template>

<script setup>
import { RouterView } from 'vue-router';
import TabBar from './components/TabBar.vue';

const tabLinks = [
  { id: 0, url: '/', name: '首页', icon: 'home-o' },
  { id: 1, url: '/exam', name: '考试', icon: 'edit' },
  { id: 2, url: '/daily', name: '日报', icon: 'completed-o' },
  { id: 3, url: '/forum', name: '论坛', icon: 'chat-o' },
  { id: 4, url: '/my', name: '我的', icon: 'manager-o' },
];
</script>

<style scoped>
#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1;
  overflow-y: auto;
}

footer {
  position: fixed;
  bottom: 0;
  z-index: 999;
}
</style>
